<script setup lang="ts">
import { trimBlank } from '@vc/utils';
import type { FormInstance } from 'element-plus';
import message from 'vc/src/common/message';
import { useUserStore } from '../../../store/modules/user';
import { checkVerifyCode } from '../apis/profile';
import PhoneCode from '../components/phone-code.vue';
import { formatPhoneHide } from '../utils';

interface Props {
  showDialog: boolean;
  showChangePhone?: boolean;
  showChangePwd?: boolean;
  changePwdCode?: boolean;
  smsType: string;
}

const {
  showDialog, smsType
} = defineProps<Props>();

const emit = defineEmits(['update:showDialog', 'update:showChangePhone', 'update:changePwdCode', 'update:showChangePwd']);

const userStore = useUserStore();
// 表单数据
const formData = reactive({
  account: userStore.getUserInfo.phone,
  verifyCode: ''
});

const ruleFormRef = ref<FormInstance>();

const { run, loading } = useRequest(checkVerifyCode, {
  manual: true
});

/** 提交 */
const handleSubmit = async () => {
  await ruleFormRef.value!.validate(async (valid) => {
    if (valid) {
      run({
        smsVerifyCode: formData.verifyCode,
        phone: trimBlank(formData.account, 'all'),
        smsType
      }).then((res) => {
        if (res.data) {
          close();
          if (smsType === 'updatePhone') {
            emit('update:showChangePhone', true);
          } else {
            emit('update:showChangePwd', true);
            emit('update:changePwdCode', formData.verifyCode);
          }
        } else {
          message.error('验证码输入错误');
        }
      });
    } else {
      return false;
    }
  });
};

const close = () => {
  emit('update:showDialog', false);
};
</script>

<template>
  <vc-dialog title="手机号验证" :modelValue="showDialog" @close="close"
    :height="240" :width="468">
    <div class="content">
      <div class="text-14px mb-25px">
        <span class="text-[#666666] w-100px inline-block">当前手机号</span>
        <span class="text-[#242934]">{{ formatPhoneHide(userStore.getUserInfo.phone) }}</span>
      </div>
      <el-form ref="ruleFormRef" @submit.native.prevent :model="formData" @keypress.enter="handleSubmit">
        <phone-code :phone="formData.account" :form="ruleFormRef"
          v-model:verifyCode="formData.verifyCode"
          :smsType="smsType" :formvalidateField="[]" />
        <el-form-item class="fr">
          <el-button class="change-color" @click="emit('update:showDialog', false)">取消</el-button>
          <el-button :loading="loading" type="primary" color="#02C680" style="color:#FFFFFF;" @click="handleSubmit">下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
  </vc-dialog>
</template>

<style lang="scss" scoped>
.content {
  padding: 20px;
}
:deep(.change-color){
  &:hover{
    color: #02C680;
    background-color: rgba(231,247,243,0.3);
    border-color: #02C680;
  }
  &:focus{
    color: #02C680;
    background-color: rgba(231,247,243,0.3);
    border-color: #02C680;
  }
}
:deep(.content){
  .vc-input__inner{
    padding-left: 16px;
  }
}
</style>
